<script setup lang="ts">
import { onMounted, computed, reactive, ref } from "vue";
import { parseJwt } from "@/utils/token";
import useStudentStore from "@/store/modules/student";
import { ElMessage } from "element-plus";

let studentStore = useStudentStore();
let groupName = ref<string>('小组1');

// 渲染小组成员表的信息
let tableData = ref<{
  studentId: number;
  studentName: string;
  studentNumber: string;
  studentPosition: number;
  groupId: number;
  groupProName: string;
  studentApplyReason: string;
  studentNotice: string;
  giteeUrl: string;
  classId: number;
}[]>([]);

// 定义初始化函数
async function initializePage() {
  if (studentStore.token != null) {
    let claims = parseJwt(studentStore.token);
    console.log("token");
    await studentStore.getGroupFile({
      studentId: claims.studentId,
      page: page.currentPage,
      pageSize: page.pageSize
    });

    // 判断当前用户是否为组长
    isGroupLeader.value = studentStore.groupInfo.groupLeader === studentStore.userInfo.studentName;
  } else {
    console.error("用户未登录");
  }

  groupName.value = studentStore.userInfo.groupProName;
  tableData.value = studentStore.tableData;
  page.total = studentStore.total;
}

onMounted(() => {
  initializePage();
});

// 计算属性用于过滤 studentPosition 等于 2 的数据
const filteredTableDataPosition2 = computed(() => {
  return tableData.value.filter(item => item.studentPosition === 2);
});

// 计算属性用于过滤 studentPosition 不等于 2 的数据
const filteredTableDataNotPosition2 = computed(() => {
  return tableData.value.filter(item => item.studentPosition !== 2);
});

const bodyCard = computed(() => {
  return {
    width: '100%',
    height: 'calc(100% - 53px - 69px)',
    overflow: 'auto'
  };
});

// 判断是否为组长
const isGroupLeader = ref<boolean>(false);

// 解散小组的方法
const disbandGroup = async () => {
  if (studentStore.token != null && isGroupLeader.value) {
    let claims = parseJwt(studentStore.token);
    console.log("token");
    await studentStore.disbandGroup(claims.studentId);
    tableData.value = studentStore.tableData;
    groupName.value = '';

    ElMessage.success('小组解散成功');
    // 清空表格数据或跳转到其他页面
    tableData.value = [];
  }
};

// 通过申请的函数
const handleEdit = async (index: any, row: any) => {
  console.log("studentId", row.studentId);
  if (isGroupLeader.value) {
    await studentStore.allowEnterGroup(row.studentId);
    initializePage();
  }
};

// 删除回调函数
const handleDelete = async (index: any, row: any) => {
  if (isGroupLeader.value) {
    await studentStore.rejectEnterGroup(row.studentId);
    initializePage();
  }
};

// 分页相关
let page = reactive({ currentPage: 1, pageSize: 100, total: 10 });
</script>
<template>
  <el-card :body-style="bodyCard">
    <template #header>
      <div style="text-align: center">
        <el-text class="mx-1" size="default">小组名称:{{ groupName }}</el-text>
      </div>
    </template>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover" style="margin-bottom: 20px;">
          <template #header>
            <div style="text-align: center;">
              <h3>小组成员</h3>
            </div>
          </template>
          <el-table :data="filteredTableDataNotPosition2" border style="width: 100%;">
            <el-table-column prop="studentName" label="姓名" width="180" />
            <el-table-column prop="studentNumber" label="学号" width="180" />
            <el-table-column label="职位">
              <template #default="scope">
                <span>{{ scope.row.studentPosition === 1 ? '组长' : '组员' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <div class="button-container">
                  <!-- 条件判断，只有当 studentPosition 不为 1 时显示删除按钮 -->
                  <el-button v-if="scope.row.studentPosition !== 1" size="small" type="danger"
                    v-debounce:500="() => handleDelete(scope.$index, scope.row)" :disabled="!isGroupLeader">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-card shadow="hover" style="margin-bottom: 20px;">
          <template #header>
            <div style="text-align: center;">
              <h3>申请列表</h3>
            </div>
          </template>
          <el-table :data="filteredTableDataPosition2" border style="width: 100%;">
            <el-table-column prop="studentName" label="姓名" width="180" />
            <el-table-column prop="studentNumber" label="学号" width="180" />
            <el-table-column prop="studentApplyReason" label="申请理由" />
            <el-table-column label="是否通过" width="150">
              <template #default="scope">
                <div class="button-container">
                  <el-button size="small" v-debounce:500="() => handleEdit(scope.$index, scope.row)"
                    :disabled="!isGroupLeader">通过</el-button>
                  <el-button size="small" type="danger" v-debounce:500="() => handleDelete(scope.$index, scope.row)"
                    :disabled="!isGroupLeader">拒绝</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <template #footer>
      <div class="footer">
        <el-button type="danger" v-debounce:500="disbandGroup" :disabled="!isGroupLeader">解散小组</el-button>
      </div>
    </template>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  width: 100%;
  height: 850px;
}

.footer {
  float: right;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>